<template>
	<view class="page">
		<xzfx-panel title="价格、车辆信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">所需车型</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.truckType" mode="selector" title="车型" placeholder="请选择所需车型" :range="$dict('truckType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">整车拼车</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.shareStatus" mode="selector" title="整车拼车" placeholder="请选择整车拼车" :range="['整车', '拼车']" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">报价</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.offerPrice" type="number" maxlength="8" placeholder="请输入报价" placeholder-class="placeholder" style="width: calc(100% - 40rpx);">
						<view style="text-align: right;width: 40rpx;font-size: 30rpx;">元</view>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="货物信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">货物类型</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.goodsType" mode="selector" title="货物类型" placeholder="请选择货物类型" :range="$dict('goodsType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">货物体积</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.goodsVolume" type="number" maxlength="100" placeholder="请输入货物体积" placeholder-class="placeholder" style="width: calc(100% - 50rpx);">
						<view style="text-align: right;width: 50rpx;font-size: 30rpx;">m³</view>
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">货物重量</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.goodsWeight" type="number" maxlength="100" placeholder="请输入货物重量" placeholder-class="placeholder" style="width: calc(100% - 50rpx);">
						<view style="text-align: right;width: 50rpx;font-size: 30rpx;">kg</view>
					</view>
				</view>
				
				
			</view>
		</xzfx-panel>
		<xzfx-panel title="时间要求" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">最早发货时间</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.sendStartTime" mode="datetime" title="最早发货时间" placeholder="请选择最早发货时间" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">最晚发货时间</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.sendEndTime" mode="datetime" title="最晚发货时间" placeholder="请选择最晚发货时间" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">最晚收货时间</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.receiveEndTime" mode="datetime" title="最晚收货时间" placeholder="请选择最晚收货时间" />
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="发货人信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">发货人</view>
					<view class="xzfx-form-value">
						<input v-model="form.sendContackName" type="text" maxlength="8" placeholder="请输入发货人姓名" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系电话</view>
					<view class="xzfx-form-value">
						<input v-model="form.sendContackPhone" type="number" maxlength="11" placeholder="请输入发货人电话" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">发货地</view>
					<view class="xzfx-form-value xzfx-form-custom" @click.stop="getMap('sendAddress')">
						<view v-if="form.sendAddress" class="input-val">{{ form.sendAddress || "" }}</view>
						<view v-else class="input-val placeholder">请选择发货地</view>
						<view class="input-icon xzfx_icon_location"></view>
					</view>
				</view>
				<view v-if="form.sendAddress" class="xzfx-form-item">
					<view class="xzfx-form-label required">发货位置</view>
					<view class="xzfx-form-value">
						<input v-model="form.sendLocation" type="text" maxlength="100" placeholder="请输入发货位置" placeholder-class="placeholder">
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="收货人信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">收货人</view>
					<view class="xzfx-form-value">
						<input v-model="form.receiveContackName" type="text" maxlength="100" placeholder="请输入收货人姓名" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系电话</view>
					<view class="xzfx-form-value">
						<input v-model="form.receiveContackPhone" type="number" maxlength="11" placeholder="请输入收货人电话" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">收货地</view>
					<view class="xzfx-form-value xzfx-form-custom" @click.stop="getMap('receiveAddress')">
						<view v-if="form.receiveAddress" class="input-val">{{ form.receiveAddress || "" }}</view>
						<view v-else class="input-val placeholder">请选择收货地</view>
						<view class="input-icon xzfx_icon_location"></view>
					</view>
				</view>
				<view v-if="form.receiveAddress" class="xzfx-form-item">
					<view class="xzfx-form-label required">收货位置</view>
					<view class="xzfx-form-value">
						<input v-model="form.receiveLocation" type="text" maxlength="100" placeholder="请输入发货位置" placeholder-class="placeholder">
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="备注" isCard>
			<textarea v-model="form.remark" class="other-requirement" slot="content" maxlength="100" placeholder="请输入备注(100字)" placeholder-class="placeholder" />
		</xzfx-panel>
		<view class="submit-button" @click.stop="$checkLogin(submitFn)">发布</view>
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				form: {
					truckType: "",
					shareStatus: "",
					offerPrice: "",
					
					goodsType: "",
					goodsVolume: "",
					goodsWeight: "",
					
					sendStartTime: "",
					sendEndTime: "",
					receiveEndTime: "",
					
					sendContackName: "",
					sendContackPhone: "",
					sendProvince: "",
					sendCity: "",
					sendDistrict: "",
					sendAddress: "",
					sendLocation: "",
					sendLng: "",
					sendLat: "",
					receiveContackName: "",
					receiveContackPhone: "",
					receiveProvince: "",
					receiveCity: "",
					receiveDistrict: "",
					receiveAddress: "",
					receiveLocation: "",
					receiveLng: "",
					receiveLat: "",
					
					remark: ""
				},
				tips: {
					truckType: "请选择所需车型",
					shareStatus: "请选择整车拼车",
					offerPrice: "请输入报价",
					
					goodsType: "请选择货物类型",
					goodsVolume: "请输入货物体积",
					goodsWeight: "请输入货物重量",
					
					sendStartTime: "请选择最早发货时间",
					sendEndTime: "请选择最晚发货时间",
					receiveEndTime: "请选择最晚收货时间",
					
					sendContackName: "请输入发货人姓名",
					sendContackPhone: "请输入发货人电话",
					sendAddress: "请选择发货地",
					sendLocation: "请输入发货位置",
					sendLng: "",
					sendLat: "",
					receiveContackName: "请输入收货人姓名",
					receiveContackPhone: "请输入收货人电话",
					receiveAddress: "请选择收货地",
					receiveLocation: "请输入收货位置",
					receiveLng: "",
					receiveLat: ""
				}
			};
		},
		onUnload () {
			chooseLocation.setLocation(null);
		},
		onShow() {
			const location = chooseLocation.getLocation();
			if(location){
				if("sendAddress" === uni.getStorageSync("map-target")){
					this.form.sendLng = location.longitude;
					this.form.sendLat = location.latitude;
					this.form.sendProvince = location.province;
					this.form.sendCity = location.city;
					this.form.sendDistrict = location.district;
					this.form.sendAddress = location.province + location.city + location.district;
					this.form.sendLocation = location.address;
				}
				if("receiveAddress" === uni.getStorageSync("map-target")){
					this.form.receiveLng = location.longitude;
					this.form.receiveLat = location.latitude;
					this.form.receiveProvince = location.province;
					this.form.receiveCity = location.city;
					this.form.receiveDistrict = location.district;
					this.form.receiveAddress = location.province + location.city + location.district;
					this.form.receiveLocation = location.address;
				}
			}
			uni.removeStorageSync("map-target");
		},
		methods: {
			getMap(target){
				uni.setStorageSync("map-target", target);
				let key = 'XKEBZ-XT6AM-UMS6B-6VEJQ-INKE6-UYFAH'; //使用在腾讯位置服务申请的key
				let referer = '百川海融小程序'; //调用插件的app的名称
				let location = {};
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						location = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					},
					fail: (error) => {
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					}
				})
			},
			submitFn(){
				let keys = Object.keys(this.tips);
				for (var i = 0; i < keys.length; i++) {
					if(!this.form[keys[i]]){
						this.$utils.system.tip(this.tips[keys[i]]);
						return
					}
				}
				if(!this.$utils.valid.phone(this.form.sendContackPhone)){
					this.$utils.system.tip("请输入合法的发货人手机号");
					return
				}
				if(!this.$utils.valid.phone(this.form.sendContackPhone)){
					this.$utils.system.tip("请输入合法的收货人手机号");
					return
				}
				let obj = JSON.parse(JSON.stringify(this.form))
				delete obj.sendAddress;
				delete obj.receiveAddress;
				this.$utils.system.loading("正在发布，请稍后");
				this.$apis.sourceGoods.submit(obj).then(res => {
					this.$utils.system.tip('发布成功');
					Object.keys(this.form).forEach(item => {
						this.form[item] = ""
					})
					setTimeout(() => {
						uni.navigateBack({ delta: 1 });
					}, 3000);
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 3000)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 100rpx;
	}
	.xzfx-form{
		padding-top: 20rpx;
		.xzfx-form-item{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #f1f1f1;
			.xzfx-form-label{
				position: relative;
				width: 220rpx;
				padding-left: 18rpx;
				font-size: 30rpx;
				color: #333333;
			}
			.required::before{
				position: absolute;
				left: 0;
				content: "*";
				color: red;
			}
			.xzfx-form-value{
				width: calc(100% - 220rpx);
				input{
					text-align: right;
				}
			}
			.xzfx-form-custom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.input-val{
					width: calc(100% - 40rpx);
					font-size: 30rpx;
					color: #333333;
					text-align: right;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.input-icon{
					width: 40rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 32rpx;
				}
			}
		}
		.xzfx-form-item:first-child{
			border-top: none;
		}
	}
	.other-requirement{
		width: 100%;
		height: 200rpx;
		margin-top: $xzfx-spacing;
	}
	.submit-button {
		margin: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 46rpx;
		background: $xzfx-theme;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 0 40rpx;
		overflow: hidden;
	}
</style>
